<template>
<div class="row">
  <swiper class="swiper_box" :options="swiperOption">
    <!-- slides -->
    <swiper-slide v-for="itme in list" :key="itme.id">
        <img class="swiper_img" :src="itme.url">
    </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
</div>
</template>

<script>
  export default {
    name: 'homeSwiper',
    data() {
      return {
        swiperOption: {
            pagination:{
                el: '.swiper-pagination'
            }
        }
      }
    },
    props: {
        list: Array
    }
  }
</script>
<style scopde>
    .swiper_box{
        overflow: hidden;
        width: 100%;
        height: 0;
        padding-bottom: 24.53%;
    }
    .swiper_img{
        width: 100%;
    }
</style>
